import { Modal, Form, Input, Button } from 'antd';

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

const FormItem = Form.Item;

const MembersModal = ({ initialValues, modalType, createData, ...modalProps }) => {
    const pswRules = modalType === 'create' ? [{ required: true, message: '请填写密码' }] : null;

    const [form] = Form.useForm();

    if (modalProps.visible) {
        form.resetFields();
    }

    const handleOk = () => {
        form
          .validateFields()
          .then(values => {
            // console.log(values);
            createData(values);
          })
          .catch(info => {
            console.log('Validate Failed:', info);
          });
    }

    const modalOpts = {
        ...modalProps,
        onOk: handleOk
    }
  
    return (
        <Modal
            {...modalOpts}
        >
            <Form form={form} {...layout}  initialValues={{...initialValues}}>
                <FormItem 
                    label="成员名称" 
                    name="name"
                    rules={[{ required: true, message: '请填写成员名称' }]}>
                    <Input />
                </FormItem>
                <FormItem 
                    label="帐号" 
                    name="username"
                    rules={[{ required: true, message: '请填写帐号' }]}>
                    <Input />
                </FormItem>
                <FormItem 
                    label="密码" 
                    name="password"
                    rules={pswRules}>
                    <Input.Password />
                </FormItem>
            </Form>
        </Modal>
    )
}

export default MembersModal;